<template>
	<div>
		<headerTop></headerTop>
		<el-row style="margin-top: 20px;">
			<el-col :span="14" :offset="4">
				<header class="form_header">选择食品种类</header>
				<el-form :model="categoryForm" label-width="110px" ref="categoryForm">
					<el-row>
						<el-col :span="14">
						<el-form-item label="食品种类">
						    <el-select v-model="categoryForm.categorySelect" :placeholder="selectValue.label">
						      <el-option 
							  v-for="item in categoryForm.categoryList"
							  :key="item.value"
							  :label="item.label"
							  :value="item.value">
							  </el-option>
						    </el-select>
						  </el-form-item>
						  </el-col>
						  <el-col :span="2">
						  <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showAddCategory = !showAddCategory">
						  	<span v-if="showAddCategory">收回食品种类</span>
						  	<span v-else>添加食品种类</span>
						  </el-button>
						  </el-col>
					</el-row>
					<el-row class="add_category_row" :class="showAddCategory ? 'showEdit' : ''">
						<div class="add_category">
							<el-form-item label="食品种类" prop="name">
								<el-input v-model="categoryForm.name"></el-input>
							</el-form-item>
							<el-form-item label="种类描述" prop="description">
								<el-input v-model="categoryForm.description"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitcategoryForm('categoryForm')">提交</el-button>
							</el-form-item>
						</div>
					</el-row>
					
				</el-form>
				<header class="form_header">添加食品</header>
				<el-form :model="foodForm" :rules="foodrules" ref="foodForm" label-width="110px">
					<el-form-item label="食品名称" prop="name">
						<el-input v-model="foodForm.name"></el-input>
					</el-form-item>
					<el-form-item label="食品活动" prop="activity">
						<el-input v-model="foodForm.activity"></el-input>
					</el-form-item>
					<el-form-item label="食品详情" prop="description">
						<el-input v-model="foodForm.description"></el-input>
					</el-form-item>
					<el-form-item label="上传食品图片">
						<el-upload class="avatar-uploader" :action="baseUrl + '/v1/addimg/food'"
							:show-file-list="false" :on-success="uploadImg"
							:before-upload="beforeImgUpload">
							<img v-if="foodForm.image_path" :src="baseImgpath + foodForm.image_path" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="食品特点">
						<el-select v-model="foodForm.attributes" multiple placeholder="请选择">
						    <el-option
						      	v-for="item in attributes"
						      	:key="item.value"
						      	:label="item.label"
						      	:value="item.value">
						    </el-option>
					 	</el-select>
					</el-form-item>
					<el-form-item label="食品规格">
						<el-radio class="radio" v-model="foodSpecs" label="one">单规格</el-radio>
						<el-radio class="radio" v-model="foodSpecs" label="more">多规格</el-radio>
					</el-form-item>
					<el-row v-if="foodSpecs == 'one'">
						<el-form-item label="包装费">
							<el-input-number v-model="foodForm.specs[0].packing_fee" :min="0" :max="100"></el-input-number>
						</el-form-item>
						<el-form-item label="价格">
							<el-input-number v-model="foodForm.specs[0].price" :min="0" :max="10000"></el-input-number>
						</el-form-item>
					</el-row>
					<el-row v-else style="overflow: auto; text-align: center;">
						<el-button type="primary" @click="dialogFormVisible = true" style="margin-bottom: 10px;">添加规格</el-button>
						<el-table
					    :data="foodForm.specs"
					    style="margin-bottom: 20px;">
						    <el-table-column
						      prop="specs"
						      label="规格">
						    </el-table-column>
						    <el-table-column
						      prop="packing_fee"
						      label="包装费">
						    </el-table-column>
						    <el-table-column
						      prop="price"
						      label="价格">
						    </el-table-column>
						    <el-table-column label="操作" >
						    <template slot-scope="scope">
						        <el-button
						          size="small"
						          type="danger"
						          @click="handleDelete(scope.$index)">删除</el-button>
						    </template>
						    </el-table-column>
						</el-table>
					</el-row>
					<el-form-item>
						<el-button type="primary" @click="addFood('foodForm')">确认添加食品</el-button>
					</el-form-item>
				</el-form>
				<el-dialog title="添加规格" :visible.sync="dialogFormVisible">
				  	<el-form :rules="specsFormrules" :model="specsForm">
					    <el-form-item label="规格" label-width="100px" prop="specs">
					     	<el-input v-model="specsForm.specs" auto-complete="off"></el-input>
					    </el-form-item>
					    <el-form-item label="包装费" label-width="100px">
							<el-input-number v-model="specsForm.packing_fee" :min="0" :max="100"></el-input-number>
						</el-form-item>
						<el-form-item label="价格" label-width="100px">
							<el-input-number v-model="specsForm.price" :min="0" :max="10000"></el-input-number>
						</el-form-item>
				  	</el-form>
				  <div slot="footer" class="dialog-footer">
				    <el-button @click="dialogFormVisible = false">取 消</el-button>
				    <el-button type="primary" @click="addspecs">确 定</el-button>
				  </div>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import headerTop from '../../../components/headerTop.vue'
	import {getCategory, addCategory, addFood} from "../../../api/getData.js"
	import {baseUrl,baseImgpath} from '../../../config/url.js'
	export default{
		components:{
			headerTop
		},
		computed: {
			selectValue() {
				return this.categoryForm.categoryList[this.categoryForm.categorySelect]||{}
			}
		},
		data(){
			return{
				baseUrl,
				baseImgpath,
				showAddCategory: false,
				categoryForm: {
					categoryList: [{value:'选项1',label:'w'},{value:'选项2',label:222}],
					categorySelect: '',
					name: '',
					description: '',
				},
				foodForm: {
					name: '',
					description: '',
					image_path: '',
					activity: '',
					attributes: [],
					specs: [{
						specs: '默认',
				      	packing_fee: 0,
				      	price: 20,
					}],
				},
				attributes: [{
				  	value: '新',
				  	label: '新品'
				}, {
				  	value: '招牌',
				  	label: '招牌'
				},],
				foodrules: {
					name: [
						{ required: true, message: '请输入食品名称', trigger: 'blur' },
					],
				},
				foodSpecs: 'one',
				dialogFormVisible: false,
				specsForm: {
				  	specs: '',
				  	packing_fee: 0,
				  	price: 20,
				},
				specsFormrules: {
					specs: [
						{ required: true, message: '请输入规格', trigger: 'blur' },
					],
				},
			}
		},
		created(){
			if (this.$route.query.restaurant_id) {
				this.restaurant_id = this.$route.query.restaurant_id;
			}else{
				this.restaurant_id = Math.ceil(Math.random()*10);
				this.$msgbox({
			      title: '提示',
			      message: '添加食品需要选择一个商铺，先去就去选择商铺吗？',
			      showCancelButton: true,
			      confirmButtonText: '确定',
			      cancelButtonText: '取消',
			      beforeClose: (action, instance, done) => {
			        if (action === 'confirm') {
			          this.$router.push('/Blist');
			          done();
			        } else {
			        	this.$message({
				            type: 'info',
				            message: '取消'
				        });
			          	done();
			        }
			      }
			    })
			}
			this.initData();
		},
		methods:{
			async initData(){
				try{
					const result = await getCategory(this.restaurant_id);
					if (result.status == 1) {
						result.category_list.map((item, index) => {
							item.value = index;
							item.label = item.name;
						})
						this.categoryForm.categoryList = result.category_list;
					}else{
						console.log(result)
					}
				}catch(err){
					console.log(err)
				}
			},
			addspecs(){
				this.foodForm.specs.push({...this.specsForm});
				this.specsForm.specs = '';
				this.specsForm.packing_fee = 0;
				this.specsForm.price = 20;
				this.dialogFormVisible = false;
			},
			addFood(foodForm){
				this.$refs[foodForm].validate(async (valid) => {
					if (valid) {
						const params = {
							...this.foodForm,
							category_id: this.selectValue.id,
							restaurant_id: this.restaurant_id,
						}
						try{
							const result = await addFood(params);
							if (result.status == 1) {
								console.log(result)
								this.$message({
					            	type: 'success',
					            	message: '添加成功'
					          	});
					          	this.foodForm = {
				    				name: '',
				    				description: '',
				    				image_path: '',
				    				activity: '',
				    				attributes: [],
				    				specs: [{
				    					specs: '默认',
							          	packing_fee: 0,
							          	price: 20,
				    				}],
				    			}
							}else{
								this.$message({
					            	type: 'error',
					            	message: result.message
					          	});
							}
						}catch(err){
							console.log(err)
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: '请检查输入是否正确',
							offset: 100
						});
						return false;
					}
				});
			},
			handleDelete(index){
				this.foodForm.specs.splice(index, 1);
			},
			submitcategoryForm(categoryForm){
				this.$refs[categoryForm].validate( async (valid) => {
					if(valid){
						const params = {
							name: this.categoryForm.name,
							description: this.categoryForm.description,
							restaurant_id: this.restaurant_id,
						}
						try{
							const result = await addCategory(params);
							if (result.status == 1) {
								this.initData();
								this.categoryForm.name = '';
								this.categoryForm.description = '';
								this.showAddCategory = false;
								this.$message({
							    	type: 'success',
							    	message: '添加成功'
							  	});
							}
						}catch(err){
							console.log(err)
						}
					}else{
						this.$notify.error({
							title: '错误',
							message: '请检查输入是否正确',
							offset: 100
						});
						return false;
					}
				})
			},
			uploadImg(res, file) {
				if (res.status == 1) {
					this.foodForm.image_path = res.image_path;
				}else{
					this.$message.error('上传图片失败！');
				}
			},
			beforeImgUpload(file) {
				const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
			
				if (!isRightType) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isRightType && isLt2M;
			},
		}
	}
</script>

<style lang="scss">
	.form_header{
		text-align: center;
		margin-bottom: 10px;
	}
	.add_category_row{
		height: 0;
		overflow: hidden;
		transition: all 0.4s;
		
	}
	.showEdit{
		
		height: 185px;
	}
</style>
